<template>
    <div>
    <el-card>
        <!-- 搜索区域 -->
        <el-row :gutter="15">
            <el-col :span="10">  
            <el-input placeholder="请输入要查找的机构" v-model="queryInfo.query" clearable @clear ="getUserList" @keyup.enter.native="getUserList">
                <el-button slot="append" type="primary" icon="el-icon-search" @click="getUserList">搜索</el-button>
            </el-input>
            </el-col>
            <el-col :span="3"> 
                <el-button @click="addDialogVisible=true">添加机构</el-button>
            </el-col>
        </el-row>
        
        <!-- table表格 -->
       <el-table :data="userList" border stripe style="margin-top:10px;"
       :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" >

            <el-table-column type="index" :index="indexMethod"></el-table-column><!--  索引页  --> 
            <!-- <el-table-column label="机构图标" prop="orgIconPath">
                <template slot-scope="scope">
                       <img :src="scope.row.orgIconPath" width="100" height="100">
                </template>
            </el-table-column> -->
            <el-table-column label="机构名称" prop="orgName"></el-table-column>
            <el-table-column label="联系人" prop="orgContactPerson"></el-table-column>
            <el-table-column label="联系电话" prop="contactPersonPhone"></el-table-column>
            <el-table-column label="机构编码" prop="orgNum"></el-table-column>
            <el-table-column label="地址" prop="orgAddress" width="180%"></el-table-column><!--  索引页  -->
            <el-table-column label="创建时间" prop="createTime" width="160%"></el-table-column>
            <el-table-column label="修改时间" prop="updateTime" width="160%"></el-table-column>
            <el-table-column label="详细信息" width="180px">
            <template slot-scope="scope" >
                <!-- 修改 -->
                <el-button type="primary" plain icon="el-icon-info"  size="mini" @click="showDetailDialog(scope.row.id)"></el-button>
                <el-button type="primary" icon="el-icon-edit"  size="mini" @click="editOrgDlg(scope.row.id)"></el-button>
                <el-button type="danger" icon="el-icon-delete"  size="mini" @click="deleteOrg(scope.row.id)"></el-button>
            </template>
            </el-table-column>               
        </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
    </el-card>
    <!-- 添加机构对话框 -->
    <el-dialog class="addorgdialog" title="添加机构"  :visible.sync="addDialogVisible" width="800px">
            <el-form :model="addorgForm" :rules="addorgFormRules" ref="addorgFormRef" label-width="auto" label-position="left">
                <el-row :gutter="15">
                    <el-col :span="12">
                        <el-form-item label="机构名称" prop="orgName">
                            <el-input :labelPosition="labelPosition" v-model="addorgForm.orgName"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="机构编码" prop="orgNum">
                            <el-input :labelPosition="labelPosition" v-model="addorgForm.orgNum"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="地址" prop="orgAddress" style="float:left;">
                            <el-cascader
                                :options="options"
                                v-model="selectedOptions"
                                :separator="'-'"
                                :labelPosition="labelPosition" 
                                @change="handleChange"
                                clearable filterable
                                style="width:294px;"
                            >
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系人" prop="orgContactPerson">
                            <el-input v-model="addorgForm.orgContactPerson"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="contactPersonPhone">
                            <el-input v-model.trim="addorgForm.contactPersonPhone"></el-input>
                        </el-form-item>
                    </el-col>   
                </el-row>    
                   <!-- :data="this.addorgForm" -->
                   <!-- prop="orgPicture" -->
                <el-row> 
                    <el-form-item label="添加机构图标" >   
                        <el-upload
                            class="avatar-uploader"
                            ref="upload"
                            action=""
                            :http-request="httpRequest"
                            :auto-upload ="false"
                            :show-file="true"
                         
                            :limit="1"
                            list-type="picture-card"
                            accept=".jpg,.png,.jpeg"
                            :on-success="handleAvatarSuccess"
                            :on-change="fileChange"
                            >
                            <i class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-row>  
            </el-form>
       <span slot="footer" class="dialog-footer">
            <el-button @click="closeAddOrg()">取 消</el-button>
            <el-button type="primary" @click="addorg()">提 交</el-button>
        </span>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog title="详细信息" :visible.sync="detailDialogVisible" width="80%" class = "detailsDialog" style="margin-top:-15px;overflow:auto;" :key="timer" >
        <div v-if="detailForm.departments.length > 0"><!-- 科室不为空才显示 -->
        <el-card v-for="(item_dep,index) in detailForm.departments" :key="item_dep.id"  style="width:300px; height:400px;margin-right: 10px;overflow:auto;float:left" >
        
        <el-form :model="detailForm" ref="detailFormRef" label-width="120px" label-position="center" size="mini" style="margin-top:-15px" >
            <el-form-item  style="margin-left: 125px;">
               <el-button  icon="el-icon-delete" @click="deleteDep(item_dep.id)" circle></el-button>
            </el-form-item>
            <el-form-item label="设备使用科室:" size="mini">
                <span>{{item_dep.depName}}</span>
            </el-form-item>
            <el-form-item label="科室联系人:" prop="depContactPerson">
                <span>{{item_dep.depContactPerson}}</span>
            </el-form-item>
            <el-form-item label="科室联系电话:" prop="contactPhone">
                <span>{{item_dep.contactPhone}}</span>
            </el-form-item>
            <el-form-item label="备注:" prop="remarks">
                <span>{{item_dep.remarks}}</span>
            </el-form-item>
        </el-form>

            <el-button v-for="(item_dev,index1) in item_dep.devices" :key="item_dev.id" style="height:50px; width:110px; margin:1px 1px;float:none;"
            @click="showDeviceDetail(index,index1)">
                {{item_dev.devName}}
                <br/>
                {{item_dev.username}}
            </el-button>

            <el-divider content-position="center">添加设备</el-divider>   <!--分割线-->
            <el-button icon="el-icon-plus" circle @click="addDeviceDialog(item_dep.id,item_dep.departmentName)" style="display:block;margin:0 auto"></el-button>
        
        </el-card>
        </div>
        <el-card style="width:200px; height:300px;margin-top:0px;text-align: center;line-height:100%">     <!-- 添加科室卡片 -->
            <el-button icon="el-icon-plus" circle @click="addDepartmentDialog(detailForm.orgNum)" style="display:block;position:relative;left:37%;bottom:0;"></el-button><p>添加科室</p>
        </el-card>

        <span slot="footer" class="dialog-footer">
            <el-button @click="detailDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="detailDialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog title="设备信息" :visible.sync="deviceDetailVisiable" width="400px"  >
        <!-- 科室不为空且设备不为空才显示 -->
        <el-form :model="detailForm" label-width="100px" label-position="center" size="mini" style="margin-top:-15px" v-if="detailForm.departments.length > 0 && detailForm.departments[dep_index].devices.length > 0">
            <el-form-item label="设备账户:">
                <span>{{detailForm.departments[dep_index].devices[dev_index].username}}</span>
            </el-form-item>
            <el-form-item label="设备编码:" >
                <span>{{detailForm.departments[dep_index].devices[dev_index].devNum}}</span>
            </el-form-item>
            <el-form-item label="设备类型:" >
                <span>{{detailForm.departments[dep_index].devices[dev_index].devType}}</span>
            </el-form-item>
            <el-form-item label="设备名称:">
                <span>{{detailForm.departments[dep_index].devices[dev_index].devName}}</span>
            </el-form-item>
            <el-form-item label="生产日期:">
                <span>{{detailForm.departments[dep_index].devices[dev_index].manufactureDate}}</span>
            </el-form-item>
            <el-form-item label="交付日期:">
                <span>{{detailForm.departments[dep_index].devices[dev_index].deliveryDate}}</span>
            </el-form-item>
            <el-form-item label="序列号:">
                <span>{{detailForm.departments[dep_index].devices[dev_index].serialCode}}</span>
            </el-form-item>
        </el-form>
        <el-divider content-position="center"></el-divider>
        <span slot="footer" class="dialog-footer" >
            <el-button type="danger" @click="deleteDevice(detailForm.departments[dep_index].devices[dev_index].id,detailForm.departments[dep_index].devices[dev_index].devName)">删除设备</el-button>
            <el-button  @click="deviceDigVis = true">修改设备</el-button> 

        </span>
    </el-dialog>

    <el-dialog title="修改设备密码" :visible.sync="deviceDigVis"  style="width:800px; height: 400px;" :close-on-click-modal='false'>
        <el-form label-position="left" label-width="80px" :model="editDeviceForm" ref="passwordForm" :rules="editDeviceRule" style="margin-top: -10px;">
                <el-form-item label="新密码" prop="newPassword">
                    <el-input show-password placeholder="输入新密码(不包含特殊符号+#%等)" v-model="editDeviceForm.newPassword"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="qyPassword" @keyup.enter.native="submitPassword()"> 
                    <el-input show-password placeholder="确认密码(不包含特殊符号+#%等)" v-model="editDeviceForm.qyPassword"></el-input>
                </el-form-item>
                <el-form-item style="float:right;margin-top: -15px;" > 
                    <el-button type="primary"  @click="submitDevicePassword(detailForm.departments[dep_index].devices[dev_index].devNum,detailForm.departments[dep_index].devices[dev_index].devName)">保存</el-button>
                    <el-button type="info" @click="resetDevicePasswordForm('passwordForm')">清空</el-button>
                </el-form-item>
            </el-form>
    </el-dialog>
    <!-- 修改信息对话框 -->
    <el-dialog title="修改信息" :visible.sync="editOrgDlgVis" style="width:800px" class="sub_dialog1" :close-on-click-modal='false'>
        <el-form v-model="editOrgForm" label-width="100px" label-position="center" size="mini">
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="机构信息" name="1">
               <el-form-item label="机构名称" prop="orgName">
               <el-input v-model="editOrgForm.orgName"></el-input>
               </el-form-item>
               <!-- <el-form-item label="机构编码" prop="orgNum">
               <el-input v-model="editOrgForm.orgNum"></el-input>
               </el-form-item> -->
               <el-form-item label="机构地址" prop="orgAddress">
               <el-input v-model="editOrgForm.orgAddress"></el-input>
               </el-form-item>
               <el-form-item label="联系人" prop="orgContactPerson">
               <el-input v-model="editOrgForm.orgContactPerson"></el-input>
               </el-form-item>
               <el-form-item label="联系电话" prop="contactPersonPhone">
               <el-input v-model="editOrgForm.contactPersonPhone"></el-input>
               </el-form-item>
                <el-form-item label="添加机构图标" prop="orgIconPath">   
                     <!-- <img :src="editOrgForm.orgIconPath" /> -->
                        <el-upload
                            class="avatar-uploader"
                            ref="uploadEdit"
                            action=""
                            :http-request="httpRequestEdit"
                            :auto-upload ="false"
                            :show-file="true"
                            :limit="1"
                            list-type="picture-card"
                            accept=".jpg,.png,.jpeg"
                            :on-success="handleAvatarSuccess"
                            :on-change="fileChange"
                            :before-upload="beforeUpload"
                            >
                            <i class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

               <!-- <el-button type="text" >点击修改</el-button> -->
            </el-collapse-item>
            <el-collapse-item v-for="(department,index) in editOrgForm.departments" :key="department.id" :title="'科室信息' +(index + 1)" :name="index">
                <el-form-item label="科室名称" prop="depName">
               <el-input v-model="department.depName"></el-input>
               </el-form-item>
               <el-form-item label="联系人" prop="depContactPerson">
               <el-input v-model="department.depContactPerson"></el-input>
               </el-form-item>
               <el-form-item label="联系电话" prop="contactPhone">
               <el-input v-model="department.contactPhone"></el-input>
               </el-form-item>
               <el-form-item label="备注" prop="remarks">
               <el-input v-model="department.remarks"></el-input>
               </el-form-item>
            </el-collapse-item>
        </el-collapse>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="closeEditOrg()">取 消</el-button>
            <el-button type="primary" @click="editOrgSubmit()">提 交</el-button>
        </span>
    </el-dialog>

    <!-- 添加科室对话框 -->
    <el-dialog title="添加科室" :visible.sync="addDepartmentVisible" style="width:800px" class="sub_dialog">
        <el-form :model="addDepartmentForm" :rules="addDepartmentFormRules" ref="addDepartmentFormRef" label-width="auto" label-position="left">
            <el-form-item label="科室名称">
                <el-input :labelPosition="labelPosition" v-model="addDepartmentForm.depName"></el-input>
            </el-form-item>
            <el-form-item label="科室联系人">
                <el-input :labelPosition="labelPosition" v-model="addDepartmentForm.depContactPerson"></el-input>
            </el-form-item>
            <el-form-item label="科室联系电话">
                <el-input v-model.trim="addDepartmentForm.contactPhone"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="addDepartmentForm.remarks"></el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="addDepartmentVisible = false">取 消</el-button>
            <el-button type="primary" @click="addDepartment">提 交</el-button>
        </span>
    </el-dialog>

    <!-- 添加设备对话框 -->
    <el-dialog title="添加设备" :visible.sync="addDeviceVisible" width="800px">
        <el-form :model="addDeviceForm" :rules="addDeviceFormRules" ref="addDeviceFormRef" label-width="auto" label-position="left">
            <el-row :gutter="15">
                <!-- <el-col :span="12">
                    <el-form-item label="设备编号" prop="devNum">
                        <el-input :labelPosition="labelPosition" v-model="addDeviceForm.devNum"></el-input>
                    </el-form-item>
                </el-col> -->
                <el-col :span="12">
                    <el-form-item label="设备名称" style="float:left;">
                        <el-select v-model="addDeviceForm.devName" placeholder="请选择设备" style="width:289px">
                            <el-option label="步态分析" value="步态分析"></el-option>
                            <el-option label="三维扫描" value="三维扫描"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备类型" style="float:left;" prop="devType">
                        <el-select v-model="addDeviceForm.devType" placeholder="请选择设备类型" style="width:289px">
                            <el-option label="成人" value="成人"></el-option>
                            <el-option label="儿童" value="儿童"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户名" prop="username">
                        <el-input :labelPosition="labelPosition"  v-model="addDeviceForm.username"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="密码" prop="password">
                        <el-input :labelPosition="labelPosition" show-password placeholder="输入密码(不包含特殊符号+#%等)" v-model="addDeviceForm.password" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :labelPosition="labelPosition" label="出厂日期" prop="manufactureDate" style="float:left;" >
                        <el-date-picker
                            v-model="addDeviceForm.manufactureDate"
                            align="left"
                            type="date"
                            placeholder="选择日期"
                            :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd"
                            style="width:289px">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :labelPosition="labelPosition" label="交付日期" prop="deliveryDate" style="float:left;">
                    <el-date-picker
                        v-model="addDeviceForm.deliveryDate"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions"
                        value-format="yyyy-MM-dd"
                        style="width:289px">
                    </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
                <!-- <el-form-item label="序列码SN" prop="serialCode">
                    <el-input v-model="addDeviceForm.serialCode"></el-input>
                </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addDeviceVisible = false">取 消</el-button>
            <el-button type="primary" @click="addDevice">提 交</el-button>
        </span>
    </el-dialog>
    </div> 
</template>

<script>
import options from '../../assets/js/country-data.js'
import { getAllCustomerApi, addCustomerApi, addDeviceApi, addDepartmentApi, getDetailsByIdApi, editOrgApi,editOrgPictureApi, deleteOrgApi,deleteDepApi,forceModifyPassword }  from '@/api/admin/customer.js'
import { delDevice01Api } from '@/api/device/footDevice.js'
import { delDevice02Api } from '@/api/device/threeDevice.js'
import { getToken } from '@/utils/auth.js'
import request from '@/utils/request'
export default {
    inject:['reload'],//刷新时，注入reload
    data(){
        return{
            id: 0,
            queryInfo:{
                query: "",  //查询信息
                pageNum: 1, //当前页数
                pageSize: 10,  //每页最大数
            },
            timer: 0,  
            options: options,    //地区选择country-data.js
            userList: [],  //用户列表
            activeNames: ['1'],
            total: 0, //总记录数
            editOrgDlgVis: false,   //修改机构对话框状态
            detailDialogVisible: false, //详细信息对话框状态
            addDialogVisible: false,    //添加机构对话框状态
            addDepartmentVisible: false,    //添加科室对话框状态
            addDeviceVisible: false,     //添加设备对话框状态
            deviceDetailVisiable: false, //设备详情
            deviceDigVis:false,//修改设备对话框状态
            selectedOptions: "",
            active: 0,
            labelPosition: 'left',
            orgName: "",
            departmentName: "",
            dev_index: 0,  //设备详情id
            dep_index: 0,  
            editOrgForm:{}, 
            orgPictureBool:false, //判断是否上传有医院图标
            //表单信息
            detailForm:{
                departments:[
                    {
                        devices: []
                    }
                ],
            },
            //添加机构表单
            addorgForm:{
                    orgName: "", 
                    // orgNum: "",
                    orgAddress: "",
                    orgContactPerson: "",
                    contactPersonPhone: "",
                    orgPicture:"",
                    note: "0",
                },
            //添加科室表单
            addDepartmentForm:{
                depName:"",
                depContactPerson:"",
                contactPhone:"",
                remarks:"",
                orgNum:"",
            },
            //添加设备表单
            addDeviceForm:{
                // devNum:"",
                devType:"",
                devName:"",
                manufactureDate:"",
                deliveryDate:"",
                // serialCode:"",
                commercialStore:"",
                depId:"",
                username:"",
                password:"",
            },
            editDeviceForm:{
                // username:"",
                newPassword:"",
                qyPassword:"",
                deviceNumber:"",
                deviceType:"",
            },
            addorgFormRules:{
                // orgNum: [
                //     { required: true, message: '请输入机构编码', trigger: 'change' }
                // ],
                orgName: [
                    { required: true, message: '请输入机构名称', trigger: 'change' }
                ],
                orgContactPerson: [
                    { required: true, message: '请输入机构联系人', trigger: 'change' }
                ],
                contactPersonPhone: [
                    { required: true, message: '请输入机构联系电话', trigger: 'blur' }
                ],
            },
            addDepartmentFormRules: {
                depName: [
                    { required: true, message: '请输入所在科室', trigger: 'change' }
                ],
            },
            addDeviceFormRules: {
                // devNum: [
                //     { required: true, message: '请输入设备编码', trigger: 'blur' },
                   
                // ],
                devType: [
                    { required: true, message: '请输入设备类型', trigger: 'blur' },
                ],
                devName: [
                    { required: true, message: '请输入设备类型', trigger: 'blur' },
                ],
                manufactureDate: [
                    { required: true, message: '请选择生产日期', trigger: 'blur' },
                    
                ],
                deliveryDate: [
                    { required: true, message: '请选择交付日期', trigger: 'blur' },
                   
                ],
                // serialCode: [
                //     { required: true, message: '请输入设备SN', trigger: 'change' }
                // ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
                ],
            },
            editDeviceRule:{
                newPassword: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
                ],
                qyPassword: [
                    { required: true, message: '请输入确认密码', trigger: 'blur' },
                    { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
                ],
            },
            pickerOptions: {
                disabledDate(time) {
                return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }]
            },
            
        }
    },
    
    methods: {
        indexMethod(index){
            return (this.queryInfo.pageNum - 1) * this.queryInfo.pageSize + index + 1
        },
        getUserList(){
            getAllCustomerApi(this.queryInfo).then(res=>{
                this.userList = res.data.orgs.records;
                this.total = res.data.orgs.total;
            }).catch(error=>{
                this.$message.error(error.data.code+" "+error.data.message)
            })
        },
        //最大数
        handleSizeChange(newSize){
            this.queryInfo.pageSize = newSize;
            this.getUserList();
        },
        //pageNum的触发动作
        handleCurrentChange(newPage){
            this.queryInfo.pageNum = newPage;
            this.getUserList();
        },
        showDetailDialog(id){
            // this.detailForm = {};
            this.id = id;  //机构id
            
            getDetailsByIdApi(id).then(res=>{
                console.log(res)
                this.detailForm = res.data.organization;  
                let len = this.detailForm.departments.length
                if(len > 0){
                    this.orgName = res.orgName;
                }else{
                    this.$message.success("未查询到科室和设备信息");
                }
            })
            this.detailDialogVisible = true;
        },

        addDepartmentDialog(orgNum){
            this.addDepartmentVisible = true;
            this.addDepartmentForm.orgNum = orgNum;
        },

        addorg(){
            this.$refs.addorgFormRef.validate(async valid=>{
                if(!valid) return this.$message.error("带*为必填项");
                if(this.orgPictureBool == false){
                let formData = new FormData();
                formData.append('contactPersonPhone', this.addorgForm.contactPersonPhone);
                formData.append('orgContactPerson', this.addorgForm.orgContactPerson)
                formData.append('orgAddress', this.addorgForm.orgAddress)
                formData.append('orgName', this.addorgForm.orgName)
                // formData.append('orgNum', this.addorgForm.orgNum)
                addCustomerApi(formData).then(res=>{
                    this.$message.success(res.message)
                    this.$refs.addorgFormRef.resetFields();
                    this.getUserList();
                    this.addDialogVisible = false;
                    this.showDetailDialog(res.data.orgId);/////////////////////////////////要求后端返回id
                }).catch(err=>{
                    this.$message.error(err.data.message)
                })
                }else{
                    this.$refs.upload.submit(); //直接调用httpRequest(params)
                    this.orgPictureBool = false
                }
                // addCustomerApi(this.addorgForm).then(res=>{
                //     this.$message.success(res.message)
                //     this.$refs.addorgFormRef.resetFields();
                //     this.getUserList();
                //     this.addDialogVisible = false;
                //     this.showDetailDialog(res.data.orgId);/////////////////////////////////要求后端返回id
                // }).catch(err=>{
                //     this.$message.error(err.data.message)
                // })
            })
        },
        closeAddOrg(){
                this.addDialogVisible = false;
                this.$refs.addorgFormRef.resetFields();
                this.reload()
                
        },
        httpRequest(params){
                let file = params.file;
                let formData = new FormData();
                formData.append('contactPersonPhone', this.addorgForm.contactPersonPhone);
                formData.append('orgContactPerson', this.addorgForm.orgContactPerson)
                formData.append('orgAddress', this.addorgForm.orgAddress)
                formData.append('orgName', this.addorgForm.orgName)
                // formData.append('orgNum', this.addorgForm.orgNum)
                formData.append('orgIconPath',file)
                addCustomerApi(formData).then(res=>{
                    // console.log(res);
                    this.$message.success(res.message)
                    this.$refs.addorgFormRef.resetFields();
                    this.getUserList();
                    this.addDialogVisible = false;
                    this.showDetailDialog(res.data.orgId);
                })
        },
        showDeviceDetail(dep_index,dev_index){
            this.deviceDetailVisiable = true;
            this.dep_index = dep_index;
            this.dev_index = dev_index;
        },

        addDepartment(){
            this.$refs.addDepartmentFormRef.validate(async valid=>{
                if(!valid) return this.$message.error("带*为必填项");
                addDepartmentApi(this.addDepartmentForm).then(()=>{
                    this.$message.success("添加成功");
                    this.$refs.addDepartmentFormRef.resetFields();
                    this.addDepartmentVisible = false;
                    this.timer = new Date().getTime();
                    this.showDetailDialog(this.id);
                })
            })
        },
        editOrgDlg(id){
            

            getDetailsByIdApi(id).then(res=>{
                this.editOrgDlgVis = true
                this.editOrgForm = res.data.organization
                console.log(this.editOrgForm);
            })
        },
        closeEditOrg(){
            this.editOrgDlgVis = false
            this.activeNames = ['1']
        },
        editOrgSubmit(){
            this.$refs.uploadEdit.submit(); //直接调用httpRequest(params)
            this.orgPictureBool = false
            // console.log(this.editOrgForm);
            editOrgApi(this.editOrgForm).then(res=>{
                this.$message.success("修改成功")
                this.editOrgDlgVis = false
                this.activeNames = ['1']
                this.getUserList()
            })
        },
        httpRequestEdit(params){
            let file = params.file.name;
            // if(this.editOrgForm.orgIconPath!=null){
            // let a = (this.editOrgForm.orgIconPath).split("\\")
            // a[a.length-1] = file;
            // var s = a.toString().replace(/,/g,'\\')
            // this.editOrgForm.orgIconPath = s
            // }
            let formData = new FormData();
            // formData.append('orgIconPathtoSrting',s)
            formData.append('orgIconPath',params.file)
            formData.append('orgId', this.editOrgForm.id);
            formData.append('orgNum', this.editOrgForm.orgNum)
            formData.append('orgName', this.editOrgForm.orgName)
            editOrgPictureApi(formData)
        },
        deleteOrg(id){
            this.$confirm('此操作将永久该机构,删除后该机构下所有设备将无法使用。 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteOrgApi(id).then(res=>{
                    this.$message.success("删除成功")
                    this.reload()
                })
            }).catch(()=>{
                this.$message.info("已取消删除")
            })
        },
        deleteDep(id){
            this.$confirm('此操作将永久该科室,删除后该科室下所有设备将无法使用。 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteDepApi(id).then(res=>{
                    this.$message.success("删除成功")
                    this.reload()

                })
            }).catch(()=>{
                this.$message.info("已取消删除")
            }).finally(()=>{
                
                // this.timer = new Date().getTime();
                // // this.dev_index = 0;
                // // this.dep_index = 0;
                // this.detailDialogVisible = false;
                // this.showDetailDialog(this.id);
            })
        },
        addDeviceDialog(depId,depName){
            this.addDeviceVisible = true
            this.addDeviceForm.depId = depId
            this.depName = depName
        },

        addDevice(){
            var flag = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]");
            if(!flag.test(this.addDeviceForm.password)){
            this.$refs.addDeviceFormRef.validate(async valid=>{
                if(!valid) return this.$message.error("带*为必填项");
                addDeviceApi(this.addDeviceForm).then(()=>{
                    this.$message.success("添加成功");
                    this.addDeviceVisible = false;
                    this.$refs.addDeviceFormRef.resetFields();
                    this.timer = new Date().getTime();
                    this.showDetailDialog(this.id);
                })
            })        
        }else{
                    this.$message.error("新密码中包含特殊符号。");
                }
        },
        //地区字符拼接
        handleChange(){
            var loc = "";
            loc = this.selectedOptions[0]+this.selectedOptions[1]+this.selectedOptions[2];
            this.addorgForm.orgAddress = loc;
        },
        //删除此设备
        deleteDevice(id,name){
         
            this.$confirm('此操作将永久删除该设备,删除后该设备将无法使用。 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if(name === "步态分析"){
                    delDevice01Api(id).then(res=>{
                        this.$message.success(res.message);
                    })
                }else if(name === "三维扫描"){
                    delDevice02Api(id).then(res=>{
                        this.$message.success(res.message);
                    })
                }else{
                    this.$message.error("删除失败")
                }
            }).catch(()=>{
                this.$message.info("已取消删除")
            }).finally(()=>{
                this.timer = new Date().getTime();
                this.dev_index = 0;
                this.dep_index = 0;
                this.deviceDetailVisiable = false;
                this.showDetailDialog(this.id);
            })
               

        },
        fileChange(file, fileList){
            if(file.status === "ready"){
                this.orgPictureBool=true;
                this.$message.info("图标只能上传一张")
            }
            if(file.status === "success"){
            this.$message.success("图标上传成功")
            }
            if(file.status ==="fail"){ 
            this.$message.error("图标上传失败")
            }      
        },
        handleAvatarSuccess(res, file) {
            if(res.code == 20000){this.$message.success(res.message)}
            else{this.$message.error(res.message)}
        },
        beforeUpload(file){
            // console.log(this.editOrgForm.orgIconPath)
        },
        submitDevicePassword(deviceNumber,deviceType){
            this.editDeviceForm.deviceType = deviceType;
            this.editDeviceForm.deviceNumber = deviceNumber;
            var flag = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]");
            if(!flag.test(this.editDeviceForm.newPassword)){
            this.$refs.passwordForm.validate((valid)=>{
                if(valid && this.editDeviceForm.newPassword === this.editDeviceForm.qyPassword){
                    console.log(this.editDeviceForm)
                    forceModifyPassword(this.editDeviceForm).then(res=>{
                        this.$message.success(res.message)
                        this.$refs.passwordForm.resetFields();
                        this.deviceDigVis = false
                    })
                }else{
                    this.$message.error("两次新密码不一致或新密码不符合规范，请检查重新输入。")
                }
            })
        }else{
                    this.$message.error("新密码中包含特殊符号。");
                }
        },
        resetDevicePasswordForm(formName) {
            this.$refs[formName].resetFields();
            
        }
    },
    created(){
        this.getUserList();
        
    },
}
</script>


<style lang="less" scoped>

.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 17px;
}
.addorgdialog{
    height: 90%;
}
.detailsDialog{
    height: 300vh;
    overflow: auto;
}
.spanItem{
    float: left;
}
.sub_dialog{
    position: absolute; 
    left:30%;
}
.sub_dialog1{
    position: absolute; 
    left:25%;
    top:-15%;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 130px;
    height: 130px;
    line-height: 130px;
    text-align: center;
  }
  .avatar {
    width: 145px;
    height: 145px;
    display: block;

  }
</style>